<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>书海,在等你！</title>
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
</head>
<body background="images/book_login%20.jpg" style="background-size:100%;background-repeat: no-repeat; background-attachment: fixed;" >
<div class="layui-container" style="width: 500px;height: 330px;position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;adding-top: 60px;border-radius: 15px">
    <form class="layui-form" action="/account/login" method="post">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-inline">
                <input type="text" name="username" lay-verify="username" autocomplete="off" placeholder="请输入用户名" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-inline">
                <input type="password" name="password" lay-verify="password" autocomplete="off" placeholder="请输入密码" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" pane="">
            <label class="layui-form-label"></label>
            <div class="layui-input-block">
                <input type="radio" name="type" value="reader" title="读者" checked="">
                <input type="radio" name="type" value="bookAdmin" title="管理员">
            </div>
        </div>
        <div class="layui-form-item">
            <button class="layui-btn" lay-submit="" lay-filter="demo2" style="margin-left: 160px;">登陆</button>
        </div>
    </form>
</div>
<script src="/layui/layui.js" charset="utf-8"></script>
<script>
    layui.use(['form'], function(){
        var form = layui.form;

        //自定义验证规则
        form.verify({
            username: function(value){
                if(value.length == 0){
                    return '用户名不能为空';
                }
            }
            ,password: [ /^[A-Za-z0-9]{6,16}$/, '密码必须6到12位']
        });

    });
</script>
</body>
</html>